<template>
  <div class="search-container">
    <el-form ref="searchRef" :model="query" :inline="true">
      <el-form-item
        :label="item.label"
        :prop="item.prop"
        v-for="(item, index) in options"
        :key="index"
      >
        <!-- 文本框、下拉框、日期框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="query[item.prop]"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          @input="search"
          clearable
        ></el-input>
        <el-select
          v-else-if="item.type === 'select'"
          v-model="query[item.prop]"
          :multiple="item.multiple"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          @change="search"
          clearable
        >
          <el-option
            v-for="(opt, index) in item.opts"
            :label="opt.label"
            :value="opt.value"
            :key="index"
          ></el-option>
        </el-select>
        <el-date-picker
          v-else-if="item.type === 'date'"
          type="date"
          v-model="query[item.prop]"
          :value-format="item.format"
          @change="search"
        ></el-date-picker>
        <el-date-picker
          v-else-if="item.type === 'daterange'"
          type="daterange"
          v-model="query[item.prop]"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="search"
        ></el-date-picker>
        <el-switch
          v-else-if="item.type === 'switch'"
          v-model="query[item.prop]"
          :active-value="item.activeValue"
          :inactive-value="item.inactiveValue"
          :active-text="item.activeText"
          :inactive-text="item.inactiveText"
          @change="search"
        ></el-switch>
        <slot :name="item.prop" v-else> </slot>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search"
          >搜索</el-button
        >
        <el-button :icon="Refresh" @click="resetForm(searchRef)"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";
import { PropType, ref } from "vue";
import { FormOptionList } from "@/types/form-option";
import { defineEmits } from "vue";
const emit = defineEmits(["reset-search"]);

const props = defineProps({
  query: {
    type: Object,
    required: true,
  },
  options: {
    type: Array as PropType<Array<FormOptionList>>,
    required: true,
  },
  search: {
    type: Function,
    default: () => {},
  },
});

const searchRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  props.search();
  emit("reset-search", props);
};
</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
